<template>
  <ms-dialog :title="title" :dialog-visible="dialogVisible" @show="showDialog" @ok="handleSaveForm" @close="handleCloseDialog">
    <el-form v-loading="loading" label-width="80px" ref="formValid" :rules="rules" :model="form">
      <el-form-item label="头像" prop="file1">
        <ms-upload
          file-path="photo"
          process-id="1"
          list-type="picture-card"
          @fileList="getFile"
          ref="file1"
        />
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="form.realName" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="所属部门" prop="depId">
        <dep-tree v-model="form.depId" />
      </el-form-item>
      <el-form-item label="角色分配" prop="roleId">
        <role-select v-model="form.roleId" />
      </el-form-item>
    </el-form>
  </ms-dialog>
</template>

<script>
import MsUpload from '@/common/upload/components'
import MsDialog from '@/common/dialog'
import { DepTree, RoleSelect } from '@/common/service'
import tip from '@/mixins/tip'
import { checkFile } from '@/utils/valid'
const prefixUrl = '/sys/user/'
export default {
  components: {
    MsDialog,
    MsUpload,
    DepTree,
    RoleSelect
  },
  mixins: [tip],
  data() {
    return {
      apiUrl: {
        get: `${prefixUrl}getById`,
        save: `${prefixUrl}saveUser`
      },
      roleOptions: [],
      rules: {
        file1: [
          { required: true, message: '上传照片不能为空', validator: checkFile, comp: this }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        email: [
          { type: 'email', required: true, message: '请输入正确邮箱地址', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ],
        depId: [
          { required: true, message: '请选择所属部门', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    beforeShowDialog() {
      this.form.depId = this.$parent.depId
    }
  }
}
</script>
